<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改服务订单')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-serviceOrder-edit" th:object="${zsyhServiceOrder}">
            <!--<input name="id" th:field="*{id}" type="hidden">-->
            <input id="afterProductId" name="afterProductId" th:field="*{afterProductId}" type="hidden">
            <div style="display: flex;width: 100%;height: 60px;border: 1px solid darkorange;border-radius:10px;justify-content: space-around;">
                <div class="form-group" style="width: 10%;float: left;">
                    <div>
                    <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">厂家下单</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.createTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">已接单</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.receiptTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">已预约</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.appointmentTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">服务中</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.todoorTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">平台待审核</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.settlementTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">厂家待审核</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.auditPlatformTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">已完成</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.completeTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">待拨款</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.auditFactoryTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
                <div class="form-group" style="width: 10%;float: left">
                    <div>
                        <label class="col-sm-3 control-label"  style="border-width: 0px;width: 100%;text-align: center;font-size: 14px;font-weight: bolder">已支付</label>
                    </div>
                    <div style="border-width: 0px;width: 100%;text-align: center">
                        <span style="color: darkorange;font-weight: bolder">[[${#dates.format(zsyhServiceOrder.paymentTime, 'yyyy-MM-dd')}]]</span>
                    </div>
                </div>
            </div>
            <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>工单基本信息--【<span style="color: red">[[${zsyhServiceOrder.orderStateName}]]</span>】</span></h5>
            <div style="display: flex;background-color: #fbedde;padding-top: 10px;">
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">工单编号：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p id="orderId" name="id" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{id}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">工单分类：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="orderTypeName" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderTypeName}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">故障类型：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="serviceTypeName" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{serviceTypeName}]]</p>
                    </div>
                </div>
            </div>
            <div style="display: flex;background-color: #fbedde">
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">维修数量：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="orderNumber" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderNumber}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">是否加急：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <select id="isPriority" name="isPriority" class="form-control m-b" style="border: 0;appearance:none;background: transparent;" th:with="type=${@dict.getType('zsyh_yesno')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{isPriority}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">故障说明：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="serviceTypeName" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{faultComment}]]</p>
                    </div>
                </div>
            </div>

            <div style="display: flex;justify-content: space-around;">
                <div style="float: left;width: 50%;">
                    <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>客户基本信息</h5>
                    <div style="display: flex;background-color: #ffffff;padding-top: 10px;border: 1px solid #d6d6d6;border-bottom: 0;">
                        <div class="form-group" style="width: 50%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">联系人：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="userName" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{userName}]]</p>
                            </div>
                        </div>
                        <div class="form-group" style="width: 50%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">联系电话：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="userPhone"class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{userPhone}]]</p>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;background-color: #ffffff;border: 1px solid #d6d6d6;border-top: 0;">
                        <div class="form-group" style="width: 100%;float: left;">
                            <label class="col-sm-3 control-label" style="width: 20%;font-weight: bolder;text-align: right;margin-left: 20px;">详细地址：</label>
                            <div class="col-sm-8" style="width: 70%">
                                <p name="userAddress" style="border-width: 0px;padding:6px 4px;" class="form-control">[[*{userAddress}]]</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="float: left;width: 50%;">
                    <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>师傅基本信息</h5>
                    <div style="display: flex;background-color: #ffffff;padding-top: 10px;border: 1px solid #d6d6d6;border-bottom: 0;">
                        <div class="form-group" style="width: 50%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">师傅名称：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="repairStorePerson" style="border-width: 0px;padding:6px 4px;"  class="form-control">[[*{repairStorePerson}]]</p>
                            </div>
                        </div>
                        <div class="form-group" style="width: 50%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">联系电话：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="repairStorePhone"class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{repairStorePhone}]]</p>
                            </div>
                        </div>
                        <!--<div class="form-group" style="width: 40%;float: left">
                            <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">预约上门时间：</label>
                            <div class="col-sm-8" style="width: 55%">
                                <p name="repairStorePhone"class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{repairStorePhone}]]</p>
                            </div>
                        </div>-->
                    </div>
                    <div style="display: flex;background-color: #ffffff;border: 1px solid #d6d6d6;border-top: 0;">
                        <div class="form-group" style="width: 100%;float: left;">
                            <label class="col-sm-3 control-label" style="width: 20%;font-weight: bolder;text-align: right;margin-left: 20px;">接单店铺名称:</label>
                            <div class="col-sm-8" style="width: 70%">
                                <p name="repairStorePhone"class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{repairStoreName}]]</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>产品基本信息</h5>
            <div style="display: flex">
                <div style="width: 100%">
                    <table id="bootstrap-table" style="width: 100%"></table>
                </div>
            </div>

            <div style="height: 20px;display: flex"><p></p></div>
            <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>预约上门信息</h5>
            <div style="display: flex">
                <div id="orderPointDiv" style="width: 100%">
                    <table id="bootstrap-table-point" style="width: 100%"></table>
                </div>
            </div>

            <div style="height: 20px;display: flex"><p></p></div>

            <h5 id="partsOrderH" class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>配件单基本信息</h5>
            <div style="display: flex">
            <div id="partsOrderDiv" style="width: 100%">
                <table id="bootstrap-table-parts" style="width: 100%"></table>
            </div>
            </div>

            <div style="height: 20px;display: flex"><p></p></div>

            <h5 id="moneyOrderH" class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>费用单基本信息</h5>
            <div style="display: flex">
                <div id="moneyOrderDiv" style="width: 100%">
                    <table id="bootstrap-table-money" style="width: 100%"></table>
                </div>
            </div>

            <div id="completeOrderP" style="height: 20px;display: flex"><p></p></div>
            <h5 id="completeOrderH" class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>完工信息</h5>
            <div id="completeOrderDiv" style="padding-top: 10px;height: 250px;">
                <div class="form-group" style="width: 30%;float: left;height: 100%">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">完工图片：</label>
                    <div class="col-sm-8" style="width: 55%;">
                        <input type="hidden" name="orderImage" th:field="*{orderImage}">
                        <div class="file-loading">
                            <input class="form-control file-upload" id="orderImage" name="file" type="file">
                        </div>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">申请结算时间：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="repairTime" class="form-control" style="border-width: 0px;padding:6px 4px;">[[${#dates.format(zsyhServiceOrder.settlementTime, 'yyyy-MM-dd HH:mm:ss')}]]</p>
                    </div>
                </div>
                <div class="form-group" style="width: 30%;float: left">
                    <label class="col-sm-3 control-label" style="width: 45%;font-weight: bolder">备注：</label>
                    <div class="col-sm-8" style="width: 55%">
                        <p name="repairContent" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderRemarks}]]</p>
                    </div>
                </div>
            </div>


            <div style="height: 20px;display: flex"><p></p></div>

            <h5 id="orderSettleH" class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>工单结算信息</h5>
            <div style="display: flex">
                <div id="orderSettleDiv" style="width: 50%">
                    <table id="bootstrap-table-settle" style="width: 100%"></table>
                </div>
                <div id="orderSettleDiv2" style="width: 50%">
                    <table id="bootstrap-table-settle2" style="width: 100%"></table>
                </div>
            </div>

            <div style="height: 20px;display: flex"><p></p></div>

            <h5 class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>工单跟踪记录</h5>
            <div style="display: flex">
                <div id="orderRoadDiv" style="width: 100%">
                    <table id="bootstrap-table-road" style="width: 100%"></table>
                </div>
            </div>

            <!--<div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">取消订单备注：</label>
                        <div class="col-sm-8">
                            <p name="cancelRemark" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{cancelRemark}]]</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">固定抽成的费用：</label>
                        <div class="col-sm-8">
                            <p name="orderFixdraw" class="form-control" type="text" style="border-width: 0px;padding:6px 4px;">[[*{orderFixdraw}]]</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">接单店铺：</label>
                        <div class="col-sm-8">
                            <p name="repairStoreName" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{repairStoreName}]]</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">服务评价内容：</label>
                        <div class="col-sm-8">
                            <p name="orderEvaluateContent" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderEvaluateContent}]]</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">服务评分：</label>
                        <div class="col-sm-8">
                            <p name="orderEvaluateScore" class="form-control" style="border-width: 0px;padding:6px 4px;">[[*{orderEvaluateScore}]]</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-xs-2 control-label">服务评价图片：</label>
                    <div class="col-xs-10">
                        <input type="hidden" name="orderEvaluateImage" th:field="*{orderEvaluateImage}">
                        <div class="file-loading">
                            <input class="form-control file-upload" id="orderEvaluateImage" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-xs-2 control-label">上传图片展示：</label>
                    <div class="col-xs-10">
                        <input type="hidden" name="orderImage" th:field="*{orderImage}">
                        <div class="file-loading">
                            <input class="form-control file-upload" id="orderImage" name="file" type="file">
                        </div>
                    </div>
                </div>
            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "zsyh/serviceOrder";
        $("#form-serviceOrder-edit").validate({
            focusCleanup: true
        });

        var prefixProduct = ctx + "zsyh/afterProduct";

        $(function() {
            var options = {
                id: "bootstrap-table",
                url: prefixProduct + "/listById?id="+$("#afterProductId").val(),
                createUrl: prefixProduct + "/add",
                updateUrl: prefixProduct + "/edit/{id}",
                removeUrl: prefixProduct + "/remove",
                exportUrl: prefixProduct + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                paginationLoop: false,
                modalName: "售后产品信息",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        field: 'id',
                        title: '产品Id',
                        align: 'center',
                        visible: false
                    },
                    {
                        field: 'factoryName',
                        align: 'center',
                        title: '售后厂家'
                    },
                    {
                        field: 'productImages',
                        align: 'center',
                        title: '产品图片',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a  href="javascript:void(0)" onclick="openAttributeImage(\'' + row.productImages + '\')">查看</a> ');
                            return actions.join('');
                        }
                    },
                    {
                        field: 'typeName',
                        align: 'center',
                        title: '产品分类'
                    },
                    {
                        field: 'productBrand',
                        align: 'center',
                        title: '产品品牌'
                    },
                    {
                        field: 'productModel',
                        align: 'center',
                        title: '产品型号'
                    },
                    {
                        field: 'productAttribute',
                        align: 'center',
                        title: '产品规格'
                    }
                    ]
            };
            $.table.init(options);
        });
        var partsStateDatas = [[${@dict.getType('parts_state')}]];
        var isReturnDatas = [[${@dict.getType('zsyh_yesno')}]];
        var isSelfPartsDatas = [[${@dict.getType('zsyh_yesno')}]];
        var prefixPartsOrder = ctx + "zsyh/serviceOrderParts";
        $(function() {
            var options = {
                id: "bootstrap-table-parts",
                url: prefixPartsOrder + "/listById?id="+$("#orderId").text(),
                createUrl: prefixPartsOrder + "/add",
                updateUrl: prefixPartsOrder + "/edit/{id}",
                removeUrl: prefixPartsOrder + "/remove",
                exportUrl: prefixPartsOrder + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                paginationLoop: false,
                modalName: "售后配件信息",
                onLoadSuccess: onLoadSuccess,
                /*detailView: true,*/
                onExpandRow : function(index, row, $detail) {
                    initChildTable(index, row, $detail);
                },
                onPostBody :function (index, row, $detail) {
                    expand(index);
                },
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table-parts').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table-parts').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="viewPartsDetail(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看详情</a> ');
                            return actions.join('');
                        }
                    },
                    {
                        field: 'id',
                        align: 'center',
                        title: '配件单号',
                    },
                    {
                        field: 'partsState',
                        align: 'center',
                        title: '申请状态',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(partsStateDatas, value);
                        }
                    },
                    /*{
                        field: 'partsContent',
                        title: '拒绝原因'
                    },*/
                    {
                        field: 'imagesMachine',
                        align: 'center',
                        title: '整机图片',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a  href="javascript:void(0)" onclick="openAttributeImage(\'' + row.imagesMachine + '\')">查看</a> ');
                            return actions.join('');
                        }
                    },
                    {
                        field: 'imagesCode',
                        align: 'center',
                        title: '整机条码或名牌图片',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a  href="javascript:void(0)" onclick="openAttributeImage(\'' + row.imagesCode + '\')">查看</a> ');
                            return actions.join('');
                        }
                    },
                    {
                        field: 'imagesFault',
                        align: 'center',
                        title: '故障配件图片',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a  href="javascript:void(0)" onclick="viewImage(\'' + row.id + '\')">查看</a> ');
                            return actions.join('');
                        }
                    },
                    /*{
                        field: 'userName',
                        title: '收件人'
                    },
                    {
                        field: 'userPhone',
                        title: '收件手机号'
                    },
                    {
                        field: 'userAddress',
                        title: '收件地址'
                    },
                    {
                        field: 'logisticsId',
                        title: '快递公司id'
                    },
                    {
                        field: 'logisticsName',
                        title: '快递公司名称'
                    },
                    {
                        field: 'logisticsNumber',
                        title: '快递单号'
                    },
                    {
                        field: 'logisticsProof',
                        title: '物流凭证'
                    },
                    {
                        field: 'logisticsRemarks',
                        title: '备注'
                    },*/
                    {
                        field: 'isReturn',
                        title: '是否返件',
                        align: 'center',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(isReturnDatas, value);
                        }
                    },
                   /* {
                        field: 'factoryName',
                        title: '厂家收件人'
                    },
                    {
                        field: 'factoryPhone',
                        title: '厂家收件手机号'
                    },
                    {
                        field: 'factoryAddress',
                        title: '厂家收件地址 '
                    },
                    {
                        field: 'returnLogisticsId',
                        title: '退回旧配件 快递公司id'
                    },
                    {
                        field: 'returnLogisticsName',
                        title: '退回旧配件 快递公司名称'
                    },
                    {
                        field: 'returnLogisticsNumber',
                        title: '退回旧配件 快递单号'
                    },
                    {
                        field: 'returnLogisticsProof',
                        title: '物流凭证'
                    },
                    {
                        field: 'returnLogisticsRemarks',
                        title: '备注'
                    }*/
                ]
            };
            $.table.init(options);
        });

        function viewImage(id) {
            var url = prefixPartsOrder + "/viewImage/"+id;
            layer.open({
                type: 2,
                area: [$(window).width()/1.5 + 'px', ($(window).height() - 50) + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "查看图片",
                content: url,
                btnClose: 1,
                // 弹层外区域关闭
                shadeClose: true,
                yes: function(index, layero) {
                    debugger;
                    var iframeWin = layero.find('iframe')[0];
                    /*var imageUrl = layero.find('iframe')[0].contentWindow.$("#imageUrl").val();*/
                    iframeWin.contentWindow.submitHandler(index, layero);
                },
                cancel: function(index) {
                    return true;
                }
            });
        }

        // 当所有数据被加载时触发处理函数
        function onLoadSuccess(data){
            if(data.total <= 0){
                $("#partsOrderH").css("display","none");
                $("#partsOrderDiv").css("display","none");
            }else{
                $("#partsOrderH").css("display","block");
                $("#partsOrderDiv").css("display","block");
            }
        }

        initChildTable = function(index, row, $detail) {
            var childTable = $detail.html('<table style="table-layout:fixed"></table>').find('table');
            $(childTable).bootstrapTable({
                url:ctx + "zsyh/serviceOrderPartsRel/listById?id="+row.id,
                modalName: "申请配件",
                method: 'post',
                sidePagination: "server",
                contentType: "application/x-www-form-urlencoded",
                columns: [
                    {
                        field: 'id',
                        title: '自购配件id',
                        visible: false
                    },
                    {
                        field: 'orderId',
                        title: '订单id',
                        visible: false
                    },
                    {
                        field: 'partsName',
                        align: 'center',
                        title: '配件名称'
                    },
                    {
                        field: 'partsAttribute',
                        align: 'center',
                        title: '配件规格'
                    },
                    {
                        field: 'partsMoneyRepair',
                        align: 'center',
                        title: '自购配件 给师傅的钱'
                    },
                    {
                        field: 'partsMoneyFactory',
                        align: 'center',
                        title: '自购配件 收取厂家的钱'
                    },
                    {
                        field: 'partsNum',
                        align: 'center',
                        title: '故障配件数量'
                    },
                    {
                        field: 'isSelfParts',
                        align: 'center',
                        title: '是否自购件',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(isSelfPartsDatas, value);
                        }
                    }]
            });
        };

        function viewPartsDetail(id) {
            $.modal.openTab("查看配件信息",prefixPartsOrder + "/edit/"+id);
        }

        var applyTypeDatas = [[${@dict.getType('apply_type')}]];
        var applyStateDatas = [[${@dict.getType('apply_state')}]];
        var prefixMoneyOrder = ctx + "zsyh/serviceOrderApplymoney";
        $(function() {
            var options = {
                id: "bootstrap-table-money",
                url: prefixMoneyOrder + "/listById?id="+$("#orderId").text(),
                createUrl: prefixMoneyOrder + "/add",
                updateUrl: prefixMoneyOrder + "/edit/{id}",
                removeUrl: prefixMoneyOrder + "/remove",
                exportUrl: prefixMoneyOrder + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                paginationLoop: false,
                onLoadSuccess: onMoneyLoadSuccess,
                modalName: "售后费用信息",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table-money').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table-money').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        field: 'id',
                        title: '费用单号',
                        align: 'center'
                    },
                    {
                        field: 'applyType',
                        align: 'center',
                        title: '申请类型',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(applyTypeDatas, value);
                        }
                    },
                    {
                        field: 'applyMoney',
                        align: 'center',
                        title: '申请金额'
                    },
                    {
                        field: 'applyState',
                        align: 'center',
                        title: '状态',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(applyStateDatas, value);
                        }
                    },
                    {
                        field: 'applyReason',
                        align: 'center',
                        title: '拒绝理由'
                    }
                ]
            };
            $.table.init(options);
        });
        function onMoneyLoadSuccess(data) {
            if(data.total <= 0){
                $("#moneyOrderH").css("display","none");
                $("#moneyOrderDiv").css("display","none");
            }else{
                $("#moneyOrderH").css("display","block");
                $("#moneyOrderDiv").css("display","block");
            }
        }

        //预约上门信息
        var prefixPoint = ctx + "zsyh/serviceOrderAppointment";
        $(function() {
            var options = {
                id: "bootstrap-table-point",
                url: prefixPoint + "/listById?id="+$("#orderId").text(),
                createUrl: prefixPoint + "/add",
                updateUrl: prefixPoint + "/edit/{id}",
                removeUrl: prefixPoint + "/remove",
                exportUrl: prefixPoint + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                paginationLoop: false,
                onLoadSuccess: onPointLoadSuccess,
                modalName: "售后预约信息",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table-point').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table-point').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        field: 'id',
                        title: '师傅预约用户id',
                        visible: false
                    },
                    {
                        field: 'orderId',
                        title: '订单id',
                        visible: false
                    },
                    {
                        field: 'repairId',
                        title: '师傅id storeid',
                        visible: false
                    },
                    {
                        field: 'appointmentDate',
                        align: 'center',
                        title: '预约日期'
                    },
                    {
                        field: 'appointmentContent',
                        align: 'center',
                        title: '预约纪要'
                    }
                ]
            };
            $.table.init(options);
        });
        function onPointLoadSuccess(data) {
            if(data.total <= 0){
                $("#orderPointDiv").css("display","none");
            }else{
                $("#orderPointDiv").css("display","block");
            }
        }

        //工单结算信息
        var feeTypeDatas = [[${@dict.getType('fee_type')}]];
        var feeClassifyDatas = [[${@dict.getType('fee_classify')}]];
        var prefixSettle = ctx + "zsyh/serviceOrderSettlement";
        $(function() {
            var options = {
                id: "bootstrap-table-settle",
                url: prefixSettle + "/listById?id="+$("#orderId").text()+"&feeType=1",
                createUrl: prefixSettle + "/add",
                updateUrl: prefixSettle + "/edit/{id}",
                removeUrl: prefixSettle + "/remove",
                exportUrl: prefixSettle + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                paginationLoop: false,
                showFooter: true,
                modalName: "售后费用信息",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table-settle').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table-settle').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        field: 'id',
                        title: '工单结算id',
                        visible: false
                    },
                    {
                        field: 'orderId',
                        title: '订单id',
                        visible: false
                    },
                    {
                        field: 'repairId',
                        title: '师傅id',
                        visible: false
                    },
                    {
                        field: 'factoryId',
                        title: '厂家id',
                        visible: false
                    },
                    {
                        field: 'feeType',
                        align: 'center',
                        title: '费用分类',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(feeTypeDatas, value);
                        }
                    },
                    {
                        field: 'feeClassify',
                        align: 'center',
                        title: '费用类型',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(feeClassifyDatas, value);
                        }
                    },
                    {
                        field: 'feeMoney',
                        align: 'center',
                        title: '金额',
                        footerFormatter:function (value) {
                            var sumBookMoney =0;
                            for (var i in value) {
                                if(value[i].feeMoney != null && value[i].feeMoney != '' && value[i].feeMoney != undefined){
                                    sumBookMoney += parseFloat(value[i].feeMoney);
                                }
                            }
                            return "合计金额：" + sumBookMoney.toFixed(2);
                        }
                    }
                ],
                onLoadSuccess: function (res) {//当所有数据被加载时触发处理函数
                    if(res.total <= 0){
                        $("#orderSettleH").css("display","none");
                        $("#orderSettleDiv").css("display","none");
                        $("#orderSettleDiv2").css("display","none");
                    }else{
                        $("#orderSettleH").css("display","block");
                        $("#orderSettleDiv").css("display","block");
                        $("#orderSettleDiv2").css("display","block");
                        var data = $('#bootstrap-table-settle').bootstrapTable('getData', true);//获取当前页数据
                        mergeCells(data,'feeType',1,$('#bootstrap-table-settle'));
                    }
                }
            };
            $.table.init(options);
        });


        /**
         * 合并单元格
         * @param data 原始数据（在服务端完成排序）
         * @param fieldName 合并属性名称
         * @param colspan 合并列
         * @param target 目标表格对象
         */
        function mergeCells(data,fieldName,colspan,target){
            //声明一个map计算相同属性值在data对象出现的次数和
            var sortMap = {};
            for(var i = 0 ; i < data.length ; i++){
                for(var prop in data[i]){
                    if(prop == fieldName){
                        var key = data[i][prop]
                        if(sortMap.hasOwnProperty(key)){
                            sortMap[key] = sortMap[key] * 1 + 1;
                        } else {
                            sortMap[key] = 1;
                        }
                        break;
                    }
                }
            }
            for(var prop in sortMap){
                console.log(prop,sortMap[prop])
            }
            var index = 0;
            for(var prop in sortMap){
                var count = sortMap[prop] * 1;
                $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
                index += count;
            }
        }

        //工单结算信息
        var feeTypeDatas = [[${@dict.getType('fee_type')}]];
        var feeClassifyDatas = [[${@dict.getType('fee_classify')}]];
        var prefixSettle = ctx + "zsyh/serviceOrderSettlement";
        $(function() {
            var options = {
                id: "bootstrap-table-settle2",
                url: prefixSettle + "/listById?id="+$("#orderId").text()+"&feeType=2",
                createUrl: prefixSettle + "/add",
                updateUrl: prefixSettle + "/edit/{id}",
                removeUrl: prefixSettle + "/remove",
                exportUrl: prefixSettle + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                paginationLoop: false,
                showFooter: true,
                modalName: "售后费用信息",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table-settle').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table-settle').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                    {
                        field: 'id',
                        title: '工单结算id',
                        visible: false
                    },
                    {
                        field: 'orderId',
                        title: '订单id',
                        visible: false
                    },
                    {
                        field: 'repairId',
                        title: '师傅id',
                        visible: false
                    },
                    {
                        field: 'factoryId',
                        title: '厂家id',
                        visible: false
                    },
                    {
                        field: 'feeType',
                        align: 'center',
                        title: '费用分类',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(feeTypeDatas, value);
                        }
                    },
                    {
                        field: 'feeClassify',
                        align: 'center',
                        title: '费用类型',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(feeClassifyDatas, value);
                        }
                    },
                    {
                        field: 'feeMoney',
                        align: 'center',
                        title: '金额',
                        footerFormatter:function (value) {
                            var sumBookMoney =0;
                            for (var i in value) {
                                if(value[i].feeMoney != null && value[i].feeMoney != '' && value[i].feeMoney != undefined){
                                    sumBookMoney += parseFloat(value[i].feeMoney);
                                }
                            }
                            return "合计金额：" + sumBookMoney.toFixed(2);
                        }
                    }
                ],
                onLoadSuccess: function (res) {//当所有数据被加载时触发处理函数
                    if(res.total <= 0){
                        $("#orderSettleH").css("display","none");
                        $("#orderSettleDiv").css("display","none");
                        $("#orderSettleDiv2").css("display","none");
                    }else{
                        $("#orderSettleH").css("display","block");
                        $("#orderSettleDiv").css("display","block");
                        $("#orderSettleDiv2").css("display","block");
                        var data = $('#bootstrap-table-settle2').bootstrapTable('getData', true);//获取当前页数据
                        mergeCells(data,'feeType',1,$('#bootstrap-table-settle2'));
                    }
                }
            };
            $.table.init(options);
        });

        //工单跟踪记录
        var prefixOrderRoad = ctx + "zsyh/serviceOrderLog";
        var logTypeDatas = [[${@dict.getType('log_type')}]];
        $(function() {
            var options = {
                id: "bootstrap-table-road",
                url: prefixOrderRoad + "/listById?id="+$("#orderId").text(),
                createUrl: prefixOrderRoad + "/add",
                updateUrl: prefixOrderRoad + "/edit/{id}",
                removeUrl: prefixOrderRoad + "/remove",
                exportUrl: prefixOrderRoad + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                pagination: false,
                paginationLoop: false,
                modalName: "售后配件信息",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table-road').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table-road').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },{
                    field: 'createTime',
                    align: 'center',
                    title: '操作时间'
                },
                    {
                        field: 'id',
                        title: '订单详细过程id',
                        align: 'center',
                        visible: false
                    },
                    {
                        field: 'orderId',
                        align: 'center',
                        title: '订单id',
                        visible: false
                    },
                    {
                        field: 'logType',
                        align: 'center',
                        title: '操作类型',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(logTypeDatas, value);
                        }
                    },
                    {
                        field: 'logContent',
                        title: '内容描述'
                    }

                ]
            };
            $.table.init(options);
        });



        //默认展开子表信息
        function expand (index){
            $("#bootstrap-table-parts").bootstrapTable('expandAllRows');
        }

            function openAttributeImage(attributeImage) {
                $.modal.open("查看图片", attributeImage);
            }

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-serviceOrder-edit').serialize());
            }
        }

        $(".file-upload").each(function (i) {
            debugger;
            var val = $("input[name='" + this.id + "']").val();
            var imageArr = val.split("|");
            $(this).fileinput({
                'uploadUrl': ctx + 'common/uploadOSS',
                initialPreviewAsData: true,
                initialPreview: imageArr,
                maxFileCount: 1,
                showRemove: false,/*是否显示移除按钮*/
                showUpload: false,/*是否显示上传按钮*/
                showBrowse: false,/*是否显示浏览按钮,选择按钮*/
                showCaption: false, /*是否显示被选文件的简介*/
                autoReplace: true,
                layoutTemplates: {
                    actionDelete:'',
                    actionUpload:''
                } /*去掉缩略图上的删除和上传按钮*/
            }).on('fileuploaded', function (event, data, previewId, index) {
                $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            })
            $(this).fileinput('_initFileActions');

        });

        $(function () {
            $('#orderState').attr("disabled",true);
            $('#isPriority').attr("disabled",true);
        })

        $(document).ready(function () {
            var comDate = [[${zsyhServiceOrder.settlementTime}]];
            if(comDate != null && comDate != '' && comDate != undefined){
                $("#completeOrderP").css("display","block");
                $("#completeOrderH").css("display","block");
                $("#completeOrderDiv").css("display","block");
            }else{
                $("#completeOrderP").css("display","none");
                $("#completeOrderH").css("display","none");
                $("#completeOrderDiv").css("display","none");
            }
        })

    </script>
</body>
</html>